import React, { Component } from 'react';
import {connect} from 'react-redux';
import {bindActionCreators} from 'redux';
import * as listActions from './store/actions/list';
import {ListProp,ProductProp} from './types/list';
import Product from './components/product';
import './App.css';

interface Iprops{
    list:ListProp[],
    getList:() =>void
}

class App extends Component<Iprops> {
    componentDidMount(){
        this.props.getList();
    }
    render() {
        let {list} = this.props;
        let total = list.reduce((prev,cur) => {
            return prev+cur.num
        },0)

        let momeny = list.reduce((prev:number,cur:ListProp) => {
            prev += cur.children.reduce((p:number,c:ProductProp) => {
                p+=c.num*c.price;
                return p
            },0)
            return prev
        },0)
        return (
            <div className="wrap">
                <div className="con">
                    <div className="left">
                        <ul>
                            {
                                list.map(item => <li key={item.id}>{item.text}---{item.num}</li>)
                            }
                        </ul>
                    </div>      
                    <div className="right">
                        <div>
                            {
                                list.map((item,index) => <div key={item.id}>
                                    <h6>{item.text}</h6>
                                    {
                                        item.children.map(v => <Product key={v.id}
                                            name={v.name}
                                            price={v.price}
                                            num={v.num}
                                            id={v.id}
                                            parentIndex={index}
                                            pic={v.pic}
                                        ></Product>)
                                    }
                                </div>)
                            }
                        </div>    
                    </div>
                </div>
                <footer>
                    底部
                    总数量:{total}
                    总价钱：{momeny}
                </footer>
            </div>
        );
    }
}

let stateMapToProps = (state:any) => {
    return {
        list:state.list
    }
}

let dispatchMapToProps = (dispatch:any) => {
    return bindActionCreators(listActions,dispatch)
}


export default connect(stateMapToProps,dispatchMapToProps)(App);